<template>
  <div class="container">
<!--        <Search></Search>-->
    <HomeNav ></HomeNav>
    <!-- 商品显示区域 -->
    <div class="content">
      <!-- 秒杀 -->
      <div class="seckill">
        <!-- 头部 -->
        <div class="seckill-head">
          <div class="seckill-icon">
            <img src="static/img/index/clock.png" />
          </div>
          <div class="seckill-text">
            <span class="seckill-title">限时秒杀</span>
            <span class="seckill-remarks">总有你想不到的低价</span>
          </div>
          <div class="count-down">
            <span class="count-down-text">当前场次</span>
            <span class="count-down-num count-down-hour">{{ seckillsHours }}</span>
            <span class="count-down-point">:</span>
            <span class="count-down-num count-down-minute">{{ seckillsMinutes }}</span>
            <span class="count-down-point">:</span>
            <span class="count-down-num count-down-seconds">{{ seckillsSeconds }}</span>
            <span class="count-down-text">后结束抢购</span>
          </div>
        </div>
        <!-- 内容 -->
        <div class="seckill-content">
          <div
            class="seckill-item"
            v-for="(item, index) in top5List"
            :key="index"
          >
            <div class="seckill-item-img">
              <img v-lazy="item.imgUrl[0]" @click="eatDetail(item.productId)" />
            </div>
            <div class="seckill-item-info">
              <p style="width: 155px;height: 52px; overflow: hidden">
                {{ item.intro }}
              </p>
              <p>
                <span class="seckill-price text-danger">
                  <Icon type="social-yen"></Icon>{{ item.promotePrice }}</span>
                <span class="seckill-old-price">
                  <s>{{ item.price }}</s>
                </span>
              </p>
            </div>
          </div>
        </div>
      </div>

      <!-- 镇店爆款 -->
      <div class="item-class">
        <div class="item-class-head">
          <span class="item-class-title">{{hotGoods.title}}</span>
          <ul>
            <li v-for="(item, index) in hotGoods.link" :key="index">
              <router-link :to="{ name: 'GoodsList', query: { cid: index + 1 } }">{{item}}</router-link>
            </li>
          </ul>
        </div>
        <div class="item-class-content" v-for="(item, index) in hotGoods.detail" :key="index">
          <div class="item-content-top">
            <div class="item-big-img">
              <router-link to="/goodsList">
                <img :src="item.bigImg" alt="">
              </router-link>
            </div>
            <div class="item-four-img">
              <div class="item-four-detail" v-for="(subItem, index) in item.itemFour" :key="index">
                <div class="item-four-detail-text">
                  <p class="pt_bi_tit">{{subItem.title}}</p>
                  <p style="display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;"
                    class="pt_bi_promo">{{subItem.intro}}</p>
                </div>
                <div class="item-four-detail-img">
                  <router-link to="/goodsList">
                    <img :src="subItem.img" alt="">
                  </router-link>
                </div>
              </div>
            </div>
          </div>
          <div class="item-content-bottom">
            <div class="item-content-bottom-img" v-for="(subImg, index) in item.itemContent" :key="index">
              <router-link to="/goodsList">
                <img :src="subImg" style="width: 193px;height: 130px;">
              </router-link>
            </div>
          </div>
        </div>
      </div>

      <!-- 新品尝鲜 -->
      <div class="item-class">
        <div class="item-class-head item-class-eat-head">
          <span class="item-class-title">{{newGoods.title}}</span>
          <ul>
            <li v-for="(item, index) in newGoods.link" :key="index">
              <router-link :to="{ name: 'GoodsList', query: { cid: index + 5 } }">{{item}}</router-link>
            </li>
          </ul>
        </div>
        <div class="item-class-content" v-for="(item, index) in newGoods.detail" :key="index">
          <div class="item-content-top">
            <div class="item-big-img">
              <img :src="item.bigImg" alt="">
            </div>
            <div class="item-four-img">
              <div class="item-four-detail" v-for="(subItem, index) in item.itemFour" :key="index">
                <div class="item-four-detail-text">
                  <p class="pt_bi_tit pt_bi_tit-eat">{{subItem.title}}</p>
                  <p
                    style="display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 3;
                    overflow: hidden;"
                    class="pt_bi_promo">{{subItem.intro}}</p>
                </div>
                <div class="item-four-detail-img">
                  <router-link to="/goodsList">
                    <img :src="subItem.img" alt="">
                  </router-link>
                </div>
              </div>
            </div>
          </div>
          <div class="item-content-bottom">
            <div class="item-content-bottom-img" v-for="(subImg, index) in item.itemContent" :key="index">
              <router-link to="/goodsList">
                <img :src="subImg" style="width: 193px;height: 130px;">
              </router-link>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Search from "@/components/Search";
import HomeNav from "@/components/nav/HomeNav";
import store from "@/vuex/store";
import { mapState, mapActions, mapGetters, mapMutations } from "vuex";
export default {
  name: "Index",
  created() {
    this.loadSeckillsInfo();
    this.loadCategory()
    this.loadTop5Detail();
    this.loadHotGoods()
    this.loadNewGoods()

    this.loadShoppingCart();
  },
  mounted() {
    const father = this;
    this.setIntervalObj = setInterval(function() {
      father.REDUCE_SECKILLS_TIME();
    }, 1000);
  },
  data() {
    return {
      category: [],
      setIntervalObj: null,
      top5List: [],
      hotGoods: {
        title: '镇店爆款',
        link: [],
        detail: []
      },
      newGoods: {
        title: '新品尝鲜',
        link: [],
        detail: []
      },
      cssList: [
        "item-class-head",
        "item-class-head1",
        "item-class-head2",
        "item-class-head3",
        "item-class-head4"
      ]
    };
  },
  computed: {
    ...mapState(["seckills"]),
    ...mapGetters(["seckillsHours", "seckillsMinutes", "seckillsSeconds"])
  },
  components: {
    Search,
    HomeNav
  },
  methods: {
    ...mapActions([
      "loadSeckillsInfo",
      "loadShoppingCart"
    ]),
    ...mapMutations(["REDUCE_SECKILLS_TIME"]),

    // 产品类别
    loadCategory() {
      const _this = this
      this.$http.post('/category/all').then(res => {
        for (let i = 0;i < res.data.data.length; i++) {
          _this.category[i] = res.data.data[i].name
        }
        const catItem = Object.assign([],_this.category)
        _this.hotGoods.link = catItem.splice(0,4)
        _this.newGoods.link = catItem
      })
    },
    // 限时秒杀
    loadTop5Detail() {
      const _this = this;
      this.$http.get("/product/top5").then(resp => {
        _this.top5List = resp.data.data;
      }).catch(err => {
        this.$Message.error(err);
      })
    },

    // 镇店爆款
    loadHotGoods() {
      const _this = this

      // 第一行
      let hot1 = {
        bigImg: '',
        itemFour: [],
        itemContent: []
      }
      let index1 = 0
      // 第二行
      let index2 = 3
      let hot2 = {
        bigImg: '',
        itemFour: [],
        itemContent: []
      }

      // 第一行大图+代表商品1+第二行代表商品4
      this.$http.get('/category/' + 1).then(resp => {
        const res = resp.data.data
        _this.$http.get('/product/' + res[1].id).then(res => {
          hot1.bigImg = res.data.data.imgUrl[0]
        })

        let item = {}
        item.title = _this.category[res[0].cid - 1]
        item.intro = res[0].name
        _this.$http.get('/product/' + res[0].id).then(res => {
          item.img = res.data.data.imgUrl[0]
        })
        hot1.itemFour[index1++] = item

        // 第二行代表商品4
        _this.$http.get('/product/' + res[2].id).then(res => {
          hot2.itemContent[2] = res.data.data.imgUrl[0]
        })

        let item2 = {}
        item2.title = _this.category[res[3].cid - 1]
        item2.intro = res[3].name
        _this.$http.get('/product/' + res[3].id).then(res => {
          item2.img = res.data.data.imgUrl[0]
        })
        hot2.itemFour[index2--] = item2
      })

      // 第一行代表商品2+第二行代表商品3
      this.$http.get('/category/' + 2).then(resp => {
        const res = resp.data.data
        _this.$http.get('/product/' + res[1].id).then(res => {
          hot1.itemContent[0] = res.data.data.imgUrl[0]
        })

        let item = {}
        item.title = _this.category[res[0].cid - 1]
        item.intro = res[0].name
        _this.$http.get('/product/' + res[0].id).then(res => {
          item.img = res.data.data.imgUrl[0]
        })
        hot1.itemFour[index1++] = item

        // 第二行代表商品3
        _this.$http.get('/product/' + res[2].id).then(res => {
          hot2.itemContent[1] = res.data.data.imgUrl[0]
        })

        let item2 = {}
        item2.title = _this.category[res[3].cid - 1]
        item2.intro = res[3].name
        _this.$http.get('/product/' + res[3].id).then(res => {
          item2.img = res.data.data.imgUrl[0]
        })
        hot2.itemFour[index2--] = item2
      })

      // 第一行代表商品3+第二行代表商品2
      this.$http.get('/category/' + 3).then(resp => {
        const res = resp.data.data
        _this.$http.get('/product/' + res[1].id).then(res => {
          hot1.itemContent[1] = res.data.data.imgUrl[0]
        })

        let item = {}
        item.title = _this.category[res[0].cid - 1]
        item.intro = res[0].name
        _this.$http.get('/product/' + res[0].id).then(res => {
          item.img = res.data.data.imgUrl[0]
        })
        hot1.itemFour[index1++] = item

        // 第二行大代表商品2
        _this.$http.get('/product/' + res[2].id).then(res => {
          hot2.itemContent[0] = res.data.data.imgUrl[0]
        })

        let item2 = {}
        item2.title = _this.category[res[3].cid - 1]
        item2.intro = res[3].name
        _this.$http.get('/product/' + res[3].id).then(res => {
          item2.img = res.data.data.imgUrl[0]
        })
        hot2.itemFour[index2--] = item2
      })

      // 第一行代表商品4+第二行大图+代表商品1
      this.$http.get('/category/' + 4).then(resp => {
        const res = resp.data.data
        // 第一行代表商品4
        _this.$http.get('/product/' + res[1].id).then(res => {
          hot1.itemContent[2] = res.data.data.imgUrl[0]
        })
        let item = {}
        item.title = _this.category[res[0].cid - 1]
        item.intro = res[0].name
        _this.$http.get('/product/' + res[0].id).then(res => {
          item.img = res.data.data.imgUrl[0]
        })
        hot1.itemFour[index1++] = item

        // 第二行大图+代表商品1
        _this.$http.get('/product/' + res[2].id).then(res => {
          hot2.bigImg = res.data.data.imgUrl[0]
        })

        let item2 = {}
        item2.title = _this.category[res[3].cid - 1]
        item2.intro = res[3].name
        _this.$http.get('/product/' + res[3].id).then(res => {
          item2.img = res.data.data.imgUrl[0]
        })
        hot2.itemFour[index2--] = item2
      })

      this.hotGoods.detail[0] = hot1
      this.hotGoods.detail[1] = hot2
    },

    // 新品尝鲜
    loadNewGoods() {
      const _this = this
      // 第一行
      let index1 = 0
      let new1 = {
        bigImg: '',
        itemFour: [],
        itemContent: []
      }
      // 第二行
      let index2 = 3
      let new2 = {
        bigImg: '',
        itemFour: [],
        itemContent: []
      }

      // 第一行大图+代表商品1+第二行代表商品4
      this.$http.get('/category/' + 5).then(resp => {
        const res = resp.data.data
        // 第一行
        _this.$http.get('/product/' + res[1].id).then(res => {
          new1.bigImg = res.data.data.imgUrl[0]
        })

        let item = {}
        item.title = _this.category[res[0].cid - 1]
        item.intro = res[0].name
        _this.$http.get('/product/' + res[0].id).then(res => {
          item.img = res.data.data.imgUrl[0]
        })
        new1.itemFour[index1++] = item

        // 第二行
        _this.$http.get('/product/' + res[4].id).then(res => {
          new2.itemContent[1] = res.data.data.imgUrl[0]
        })
        _this.$http.get('/product/' + res[5].id).then(res => {
          new2.itemContent[2] = res.data.data.imgUrl[0]
        })

        let item2 = {}
        item2.title = _this.category[res[3].cid - 1]
        item2.intro = res[3].name
        _this.$http.get('/product/' + res[3].id).then(res => {
          item2.img = res.data.data.imgUrl[0]
        })
        new2.itemFour[index2--] = item2
      })

      // 第一行代表商品2+第二行代表商品3
      this.$http.get('/category/' + 6).then(resp => {
        const res = resp.data.data
        _this.$http.get('/product/' + res[1].id).then(res => {
          new1.itemContent[0] = res.data.data.imgUrl[0]
        })

        let item = {}
        item.title = _this.category[res[0].cid - 1]
        item.intro = res[0].name
        _this.$http.get('/product/' + res[0].id).then(res => {
          item.img = res.data.data.imgUrl[0]
        })
        new1.itemFour[index1++] = item

        // 第二行
        _this.$http.get('/product/' + res[2].id).then(res => {
          new2.itemContent[0] = res.data.data.imgUrl[0]
        })

        let item2 = {}
        item2.title = _this.category[res[3].cid - 1]
        item2.intro = res[3].name
        _this.$http.get('/product/' + res[3].id).then(res => {
          item2.img = res.data.data.imgUrl[0]
        })
        new2.itemFour[index2--] = item2
      })

      // 第一行代表商品3、4+第二行代表商品1、2
      this.$http.get('/category/' + 7).then(resp => {
        const res = resp.data.data
        _this.$http.get('/product/' + res[2].id).then(res => {
          new1.itemContent[1] = res.data.data.imgUrl[0]
        })
        _this.$http.get('/product/' + res[3].id).then(res => {
          new1.itemContent[2] = res.data.data.imgUrl[0]
        })

        let item1 = {}
        item1.title = _this.category[res[0].cid - 1]
        item1.intro = res[0].name
        _this.$http.get('/product/' + res[0].id).then(res => {
          item1.img = res.data.data.imgUrl[0]
        })
        new1.itemFour[index1++] = item1

        let item2 = {}
        item2.title = _this.category[res[1].cid - 1]
        item2.intro = res[1].name
        _this.$http.get('/product/' + res[1].id).then(res => {
          item2.img = res.data.data.imgUrl[0]
        })
        new1.itemFour[index1++] = item2

        // 第二行
        _this.$http.get('/product/' + res[2].id).then(res => {
          new2.bigImg = res.data.data.imgUrl[0]
        })

        let item3 = {}
        item3.title = _this.category[res[6].cid - 1]
        item3.intro = res[6].name
        _this.$http.get('/product/' + res[6].id).then(res => {
          item3.img = res.data.data.imgUrl[0]
        })
        new2.itemFour[index2--] = item3

        let item4 = {}
        item4.title = _this.category[res[7].cid - 1]
        item4.intro = res[7].name
        _this.$http.get('/product/' + res[7].id).then(res => {
          item4.img = res.data.data.imgUrl[0]
        })
        new2.itemFour[index2--] = item4
      })

      this.newGoods.detail[0] = new1
      this.newGoods.detail[1] = new2
    },

    // 商品详情
    eatDetail(productId) {
      this.$router.push({
        path: "/goodsDetail",
        query: { productId: productId }
      });
    }
  },
  destroyed() {
    clearInterval(this.setIntervalObj);
  },
  store
};
</script>

<style scoped>
.container {
  background-color: #ffffff;
  /*padding-top: 20px;*/
}
.content {
  width: 1008px;
  margin: 0px auto;
}
/*****************************秒杀专栏开始*****************************/
/*秒杀专栏*/
.seckill {
  width: 100%;
  height: 330px;
  margin: 15px auto;
  background-color: #fff;
}
.seckill-head {
  width: 100%;
  height: 50px;
  background-color: #e01222;
}
.seckill-icon {
  width: 68px;
  height: 100%;
  float: left;
}
.seckill-icon img {
  width: 35px;
  height: 35px;
  margin-top: 6px;
  margin-left: 15px;
  animation-name: shake-clock;
  animation-duration: 0.3s;
  animation-iteration-count: infinite; /*设置无线循环*/
}
/*定义闹钟震动动画关键帧*/
@keyframes shake-clock {
  0% {
    transform: rotate(-8deg);
  }
  50% {
    transform: rotate(8deg);
  }
  100% {
    transform: rotate(-8deg);
  }
}
.seckill-text {
  width: 300px;
  height: 100%;
  float: left;
}
.seckill-text .seckill-title {
  font-size: 22px;
  line-height: 50px;
  color: #fff;
}
.seckill-text .seckill-remarks {
  margin-left: 5px;
  font-size: 10px;
  color: #fff;
}
/*倒计时*/
.count-down {
  height: 100%;
  margin-right: 30px;
  line-height: 50px;
  float: right;
}
.count-down-text {
  color: #fff;
}
.count-down-num {
  padding: 3px;
  border-radius: 5px;
  background-color: #440106;
  font-size: 26px;
  font-weight: bold;
  color: #f90013;
}
.count-down-point {
  font-size: 26px;
  font-weight: bold;
  color: #440106;
}

.seckill-content {
  width: 100%;
  height: 280px;
}
.seckill-item {
  width: 183px;
  height: 250px;
  margin-top: 15px;
  margin-left: 15px;
  box-shadow: 0px 0px 8px #ccc;
  cursor: pointer;
  float: left;
}
.seckill-item-img {
  width: 160px;
  height: 160px;
  margin: 0px auto;
  overflow: hidden;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
}
.seckill-item-img img {
  width: 130px;
  height: 130px;
  margin-left: 15px;
  margin-top: 15px;
  transition: margin-top 0.3s;
}
.seckill-item-img:hover img {
  margin-top: 6px;
  transition: margin-top 0.3s;
}
.seckill-item-info {
  padding: 5px;
  padding-left: 15px;
  padding-right: 15px;
  font-size: 12px;
  color: #009688;
}
.seckill-item-info i:first-child {
  font-size: 14px;
}
.seckill-price {
  margin-right: 5px;
  font-size: 25px;
  font-weight: bold;
}
/*****************************秒杀专栏结束*****************************/

/*****************************镇店爆款开始*****************************/
.item-class {
  width: 100%;
  height: 470px;
  margin-top: 15px;
  background-color: #fff;
}
.item-class-head {
  width: 100%;
  height: 50px;
  background-color: #4488a7;
}

.item-class-eat-head {
  background-color: #ecb226;
}
.item-class-head1 {
  width: 100%;
  height: 50px;
  background-color: #ecb226;
}
.item-class-head2 {
  width: 100%;
  height: 50px;
  background-color: #963ca7;
}
.item-class-head3 {
  width: 100%;
  height: 50px;
  background-color: #4221a7;
}
.item-class-head4 {
  width: 100%;
  height: 50px;
  background-color: #442217;
}

.item-class-head ul {
  list-style: none;
  float: right;
  margin-right: 30px;
  line-height: 50px;
}
.item-class-head a {
  padding: 6px;
  margin-left: 15px;
  font-size: 12px;
  background-color: #6da6be;
  border: 1px solid #6da6be;
  text-decoration: none;
  color: #fff;
}

.item-class-eat-head a {
  background-color: #f8c159;
  border: 1px solid #f8c159;
}

.item-class-head a:hover {
  border: 1px solid #fff;
}
.item-class-head li {
  float: left;
}
.item-class-head1 ul {
  list-style: none;
  float: right;
  margin-right: 30px;
  line-height: 50px;
}
.item-class-head1 a {
  padding: 6px;
  margin-left: 15px;
  font-size: 12px;
  background-color: #6da6be;
  border: 1px solid #6da6be;
  text-decoration: none;
  color: #fff;
}

.item-class-head1 a:hover {
  border: 1px solid #fff;
}
.item-class-head1 li {
  float: left;
}
.item-class-head2 ul {
  list-style: none;
  float: right;
  margin-right: 30px;
  line-height: 50px;
}
.item-class-head2 a {
  padding: 6px;
  margin-left: 15px;
  font-size: 12px;
  background-color: #e3613ae6;
  border: 1px solid #e3613ae6;
  text-decoration: none;
  color: #fff;
}

.item-class-head2 a:hover {
  border: 1px solid #fff;
}
.item-class-head2 li {
  float: left;
}
.item-class-head3 ul {
  list-style: none;
  float: right;
  margin-right: 30px;
  line-height: 50px;
}
.item-class-head3 a {
  padding: 6px;
  margin-left: 15px;
  font-size: 12px;
  background-color: #6da6be;
  border: 1px solid #6da6be;
  text-decoration: none;
  color: #fff;
}

.item-class-head4 ul {
  list-style: none;
  float: right;
  margin-right: 30px;
  line-height: 50px;
}
.item-class-head4 a {
  padding: 6px;
  margin-left: 15px;
  font-size: 12px;
  background-color: #6da6be;
  border: 1px solid #6da6be;
  text-decoration: none;
  color: #fff;
}

.item-class-head4 a:hover {
  border: 1px solid #fff;
}
.item-class-head4 li {
  float: left;
}
.item-class-head3 a:hover {
  border: 1px solid #fff;
}
.item-class-head3 li {
  float: left;
}
.item-class-title {
  font-size: 25px;
  line-height: 50px;
  color: #fff;
  margin-left: 15px;
}
.item-class-content {
  width: 49%;
  cursor: pointer;
  border-right: 1px solid #ccc;
  margin-right: 0.9%;
  /*background-color: #cff;*/
  float: left;
}
.item-class-content:nth-child(odd) {
  border: none;
}
.item-content-top {
  width: 100%;
  height: 260px;
}
.item-big-img {
  width: 180px;
  height: 260px;
  overflow: hidden;
  float: left;
}
.item-big-img img {
  margin-left: 0px;
  transition: margin-left 0.3s;
}
.item-big-img:hover img {
  margin-left: -15px;
  transition: margin-left 0.3s;
}
.item-four-img {
  width: 303px;
  margin-left: 8px;
  float: left;
}
.item-four-detail img {
  margin-left: 0px;
  transition: margin-left 0.3s;
}
.item-four-detail:hover img {
  margin-left: -6px;
  transition: margin-left 0.3s;
}
.item-four-detail {
  width: 152px;
  height: 130px;
  margin-left: -1px;
  float: left;
}
.item-four-detail:first-child {
  border-right: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.item-four-detail:last-child {
  border-top: 1px solid #ccc;
  border-left: 1px solid #ccc;
}
.item-four-detail-text {
  width: 50px;
  margin-left: 5px;
  margin-top: 15px;
  float: left;
}
.item-four-detail-img {
  width: 96px;
  margin-top: 15px;
  overflow: hidden;
  float: left;
}
.item-four-detail-img img {
  margin-left: 5px;
  width: 90px;
}
.pt_bi_tit {
  font-weight: bold;
  font-size: 12px;
  color: #4488a7;
}
.pt_bi_tit-eat {
  color: #ecb127;
}
.pt_bi_promo {
  color: #00695c;
}
.item-content-bottom {
  width: 100%;
  margin-top: 8px;
}
.item-content-bottom-img {
  width: 156px;
  margin-right: 8px;
  overflow: hidden;
  float: left;
}
.item-content-bottom-img img {
  margin-left: 0px;
  transition: margin-left 0.3s;
}
.item-content-bottom-img:hover img {
  margin-left: -15px;
  transition: margin-left 0.3s;
}
/*****************************镇店爆款结束*****************************/
</style>
